<!--模块管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="设备编号">
        <el-input
          v-model="searchKey.deviceno"
          clearable
          placeholder="请输入学校名称"
          @keyup.enter.native="onsearch"
        />
      </el-form-item>
      <el-form-item label="学校名称">
        <el-input
          v-model="searchKey.schoolname"
          clearable
          placeholder="请输入学校名称"
          @keyup.enter.native="onsearch"
        />
      </el-form-item>
      <el-form-item label="地址">
        <el-input
          v-model="searchKey.addr"
          clearable
          placeholder="请输入地址"
          @keyup.enter.native="onsearch"
        />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select
          v-model="searchKey.usertype"
          placeholder="请选择状态"
          @change="getObjectCode()"
          filterable
        >
          <el-option label="启用" :value="2" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker
          v-model="searchKey.createtime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addChange">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table
        ref="table"
        :data="searchData"
        v-loading="page.tableLoading"
        center
        stripe
        border
      >
        <el-table-column
          prop="devicemode"
          label="进出方式"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="props">
            {{ props.row.devicemode == 1 ? "进" : "出" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="createtime"
          label="创建时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="schoolid"
          label="学校编码"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="deviceno"
          label="设备编号"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="username"
          label="学校名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="状态"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="props">
            {{ props.row.status == 0 ? "禁用" : "启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="props">
            <el-button
              type="success"
              size="small"
              round
              @click="editInfo(props.row)"
              >修 改</el-button
            >
            <el-button
              type="danger"
              size="small"
              round
              @click="delInfo(props.row)"
              >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
    <!-- 添加 修改 信息的弹框 -->
    <el-dialog
      :title="!addModel.item.agentid ? '新增' : '修改'"
      :visible.sync="addModel.flag"
      width="750px"
      :close-on-click-modal="false"
    >
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display: flex">
          <el-form-item label="设备编码:" required>
            <el-input
              v-model="searchKey.deviceno"
              clearable
              placeholder="请输入设备编码"
              @keyup.enter.native="onsearch"
            />
          </el-form-item>
          <el-form-item label="设备进出口方式" required>
            <el-select v-model="addModel.item.agenttype" placeholder="请选择型">
              <el-option label="进" :value="1" />
              <el-option label="出" :value="2" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="学校名称:" required>
            <el-select
              v-model="addModel.item.schoolname"
              filterable
              value-key="schoolid"
              placeholder="请选择学校名称"
              @change="schoolChange($event)"
              :disabled="addModel.item.classid ? true : false"
            >
              <el-option
                v-for="item in schoolList"
                :key="item.schoolid"
                :label="item.schoolname"
                :value="{
                  schoolid: item.schoolid,
                  schoolname: item.schoolname,
                }"
              >
              </el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="地址:" required>
            <el-input
              v-model="addModel.item.addr"
              type="input"
              placeholder="请输入地址"
            />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="创建时间" >
            <el-date-picker  v-model="addModel.item.entranceyear" value-format="yyyy" format="yyyy" type="year" placeholder="请输入入学年份"/>
          </el-form-item>
           <el-form-item label="状态" required>
            <el-radio-group v-model="addModel.item.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="2">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { getGatebarrierinfolist } from "@/api/throughManagement/index";
const defaultAddItem = {
  schoolid: "",
  schoolname: "",
  deviceno: "",
  devicemode: 1,
  contactman: "",
  phone: "",
  addr: "",
  status: 0, // 1:启用 0:禁用
};
export default {
  name: "AgentManagement",
  components: { Pagination },
  data() {
    return {
      searchKey: {
        devicemode: 1, // 姓名
        schoolname: "",
        addr: "",
        status: 0,
        createtime: "",
      },
      searchData: [], // 搜索的值
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0, // 总页数
      },
      addModel: {
        flag: false,
        item: defaultAddItem,
      },
    };
  },
  mounted() {
    this.onsearch();
  },
  methods: {
    addChange() {
      this.addModel.item = Object.assign({}, defaultAddItem);
      this.addModel.flag = true;
    },
    editInfo(row) {
      this.addModel.item = Object.assign({}, row);
      this.addModel.flag = true;
    },
    submitArea() {
      var that = this;
      var params = {};
      if (that.addModel.item.agentid) {
        params.agentid = that.addModel.item.agentid;
      }
      params.agentname = that.addModel.item.agentname;
      params.areacode = that.addModel.item.areacode;
      params.agenttype = that.addModel.item.agenttype;
      params.contactman = that.addModel.item.contactman;
      params.phone = that.addModel.item.phone;
      params.addr = that.addModel.item.addr;

      var loginInit = that.$loading();
      if (params.agentid) {
        editagent(params)
          .then((res) => {
            loginInit.close();
            that.addModel.flag = false;
            if (res.data.code == 0) {
              that.$message({
                type: "success",
                message: "修改成功！",
              });
            } else {
              that.$message({
                type: "success",
                message: res.data.msg,
              });
            }
            that.onsearch();
          })
          .catch(() => {
            loginInit.close();
          });
      } else {
        addagent(params)
          .then((res) => {
            loginInit.close();
            that.addModel.flag = false;
            if (res.data.code == 0) {
              that.$message({
                type: "success",
                message: "新增成功！",
              });
            } else {
              that.$message({
                type: "success",
                message: res.data.msg,
              });
            }
            that.onsearch();
          })
          .catch(() => {
            loginInit.close();
          });
      }
    },
    // 删除
    delInfo(item) {
      this.$confirm("确定要删除此条记录吗？删除后不可恢复！", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var params = {};
        var that = this;
        params.agentid = item.agentid;
        delagent(params)
          .then((res) => {
            if (res.data.code == 0) {
              that.$message({
                type: "success",
                message: "删除成功",
              });
            }
            that.onsearch();
          })
          .catch((error) => [
            that.$message({
              type: "warning",
              message: "删除失败",
            }),
          ]);
      });
    },
    onsearch() {
      this.page.currentPage = 1;
      this.onSubmit();
    },
    onSubmit() {
      var params = {};
      var that = this;
      params.pageindex = that.page.currentPage; // 当前页数
      params.pagesize = that.page.pageSize; // 每页展示条数
      that.page.tableLoading = true;
      const options = Object.assign(params, this.searchKey);
      getGatebarrierinfolist(options)
        .then((res) => {
          that.page.tableLoading = false;
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist;
            that.page.totalRow = res.data.data.totalcount;
          } else {
            that.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          // that.searchData = res.data.data.datalist
          // that.page.totalRow = res.data.data.totalcount
          // that.page.totalPage = res.data.page.totalPageNum
          // that.page.pageSize = parseInt(res.data.page.pageNum)
        })
        .catch(() => {
          that.page.tableLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
}
.el-table .el-button {
  display: inline-block;
  margin: 0 10px;
}
</style>
